<template>
  <div id="VIP_index" class="all">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>库存管理 </el-breadcrumb-item>
      <el-breadcrumb-item>库存统计</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <div class="table-container">
      <span style="margin-right: 91%;padding: 10px;"><b>库存统计</b></span>
      <el-divider class="custom-divider"></el-divider>
      <el-row :gutter="20">
        <el-col :span="6" style="padding:10px;">
          <div>
            <el-statistic group-separator="," :precision="0" :value="chart.goodsTotal"
              :title="chart.title1"></el-statistic>
          </div>
        </el-col>
        <el-col :span="6" style="padding:10px;">
          <div>
            <el-statistic group-separator="," :precision="0" :value="chart.goodsTypeTotal" :title="chart.title2"></el-statistic>
          </div>
        </el-col>
        <el-col :span="6" style="padding:10px;">
          <div>
            <el-statistic group-separator="," :precision="0" :value="chart.supplierTotal" :title="chart.title3"><template
                slot="suffix">
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6" style="padding:10px;">
          <div>
            <el-statistic group-separator="," :precision="0" :value="chart.inventoryTotal" :title="chart.title4"><template
                slot="suffix">
              </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </div>


    <br>


    <div class="table-container">
      <span style="margin-right: 71%;padding: 10px;"><b>库存查询</b></span>
      <span style="margin-right: 6%;">
        <i class="el-icon-bottom"></i>
        <b>当前库存过低通知边界</b>
      </span>
      <el-divider class="custom-divider"></el-divider>
      <el-form :model="selform" ref="form">
        <el-row>
          <el-col :span="4">
            <el-input v-model="selform.commodityName" style="width: 95%;padding: 10px;" placeholder="商品名称" />
          </el-col>
          <el-col :span="3">
            <el-input v-model="selform.categoryName" style="width: 95%;padding: 10px;" placeholder="商品类别" />
          </el-col>
          <el-col :span="4">
            <el-input v-model="selform.supplierName" style="width: 95%;padding: 10px;" placeholder="供应商名称" />
          </el-col>

          <el-col :span="2">
            <el-input v-model="selform.downnumber" style="width: 95%;padding: 10px;" placeholder="库存量下限" />
          </el-col>
          <el-col :span="2">
            <el-input v-model="selform.upnumber" style="width: 95%;padding: 10px;" placeholder="库存量上限" />
          </el-col>
          <el-col :span="3" style="text-align: center;padding: 8px 20px;">
            <el-button type="primary" style="font-size: 16px;" @click="submitselMessage" icon="el-icon-search"> 搜索</el-button>
            <el-dialog title="订单信息详情" :visible.sync="showMessage" @close="closeShowMessage" :close-on-click-modal="false">
              <el-table :data="flowlist" style="width: 100%" size="medium">
                <el-table-column width="100" prop="type" label="订单类型">
                  <template slot-scope="scope">
                    {{ geType(scope.row.type) }}
                  </template>
                </el-table-column>
                <el-table-column width="150" prop="purchaseId" label="订单编号"></el-table-column>
                <el-table-column width="200" prop="name" label="购买用户/供货商"></el-table-column>
                <el-table-column width="100" prop="number" label="数量"></el-table-column>
                <el-table-column width="170" prop="orderTime" label="时间"></el-table-column>
              </el-table>
              <div slot="footer" class="dialog-footer">
                <el-button @click="closeShowMessage">返 回</el-button>
              </div>
            </el-dialog>
          </el-col>
          <el-col :span="2">
            <el-input v-model="selform.numberlimit" style="width: 95%;padding: 10px;" placeholder="库存边界" />
          </el-col>
          <el-col :span="2">
            <el-input v-model="selform.newnumberlimit" style="width: 95%;padding: 10px;" placeholder="修改" />
          </el-col>
          <el-col :span="1" style="text-align: center;padding: 8px 20px;">
            <el-button type="primary" style="font-size: 16px;" @click="setnumberlimit">确定</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <br>

    <!--表格数据-->
    <div class="table-container">
      <span style="margin-right: 91%;padding: 10px;"><b>库存信息</b></span>
      <el-divider class="custom-divider"></el-divider>
      <el-table :data="maindata" style="width: 100%" size="medium">
        <el-table-column prop="commodityId" width="150" label="商品编号"> </el-table-column>
        <el-table-column width="250" prop="commodityName" label="商品名称"></el-table-column>
        <el-table-column width="150" prop="categoryName" label="商品种类">
          <template slot-scope="scope">
            {{ getCategoryIdText(scope.row.categoryName) }}
          </template>
        </el-table-column>
        <el-table-column width="250" prop="supplierName" label="供应商名称">
        </el-table-column>
        <el-table-column width="250" prop="phone" label="联系方式">
        </el-table-column>
        <el-table-column width="220" prop="number" label="库存量" fixed="right">
        </el-table-column>
        <!-- <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="scope">
            <el-button style="font-size: 16px" type="primary" @click="openShowMessage(scope.row)"> 出入详情</el-button> -->
            <!-- <el-button style="font-size: 16px" type="success" @click="openUpdateMessage(scope.row)"> 修改</el-button> -->
          <!-- </template>
        </el-table-column> -->
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        background layout="total, prev, pager, next, jumper" :total="400">
      </el-pagination>

    </div>
  </div>
</template>
  
<script>
import axios from 'axios';
export default {
  data() {
    return {
      empId: "",
      cusId: "",
      username: "",
      password: "",
      commodityId: "",
      chart: {
        title1: "商品总数",
        goodsTotal:"",
        title2: "商品种类总数",
        goodsTypeTotal: "",
        title3: "供应商总数",
        supplierTotal: "",
        title4: "库存总数",
        inventoryTotal: "",
      },
      maindata: [
        {
          commodityId: "1",
          commodityName: "保温杯",
          categoryName: 2,
          supplierName: "富光",
          phone: "0551-687-1888",
          number: "50",
        },
        {
          commodityId: "2",
          commodityName: "特仑苏纯牛奶250*12盒整箱",
          categoryName: 1,
          supplierName: "蒙牛",
          phone: "400-660-3333",
          number: "150",
        },
      ],
      flowlist: [//这个要按照时间排序
        {
          type: "0",
          purchaseId: "64532364",
          number: "-1",
          name: "Frevoid",
          orderTime: "2023-12-31 12:42:51",
        },
        {
          type: "1",
          purchaseId: "57953276",
          number: "+20",
          name: "富光",
          orderTime: "2023-12-31 12:42:51",
        },
        {
          type: "1",
          purchaseId: "23460075",
          number: "+15",
          name: "富光",
          orderTime: "2024-01-02 12:42:51",
        },
      ],

      inputMessage: false,
      updateMessage: false,
      showMessage: false,
      selform: {
        commodityName: "",
        categoryName: "",
        supplierName: "",
        downnumber: "",
        upnumber: "",
        numberlimit:"",
        newnumberlimit:"",
      },

      formLabelWidth: '90px',
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    getMaindata() {
      const url = "http://localhost:8080/invsta";
      axios.get(url)
        .then((response) => {
          console.log(response.data);
          this.maindata = response.data.data.rows;
        })
        .catch((error) => {
          console.error('Error in getMaindata request', error);
        });
    },

    init() {
      this.empId = localStorage.getItem('empId');
      this.cusId = localStorage.getItem('cusId');
      this.username = localStorage.getItem('username') || "";
      this.password = localStorage.getItem('password') || "";
    },

    getTitledata() {
      const url = "http://localhost:8080/statistics";
      axios.get(url)
        .then((response) => {
          console.log(response.data);
          this.chart.goodsTotal = response.data.data.goodsTotal;
          this.chart.goodsTypeTotal = response.data.data.goodsTypeTotal;
          this.chart.inventoryTotal = response.data.data.inventoryTotal;
          this.chart.supplierTotal = response.data.data.supplierTotal;
        })
        .catch((error) => {
          console.error('Error in getTitledata request', error);
        });
    },

    selDate() {
      const url = "http://localhost:8080/invsta";
      axios.get(url, {
        params: this.selform
      }).then((response) => {
        console.log(response.data);
        this.maindata = response.data.data.rows;
      })
        .catch((error) => {
          console.error('Error in selData request', error);
        });
    },

    showdetailData() {
      let url = "http://localhost:8080/invstamessage";
      axios.get(url, { params: this.commodityId })
        .then((response) => {
          console.log(response.data);
          this.flowlist = response.data.data.rows;
        })
        .catch((error) => {
          console.error('Error in showdetailData request', error);
        });
    },

    openShowMessage(row) {
      //获取一个商品的所有进出信息
      this.commodityId = row.commodityId;
      this.showdetailData();
      this.showMessage = true;
    },
    closeShowMessage() {
      this.showMessage = false;
    },


    submitselMessage() {
      this.selDate();
    },
    checkid() {
      if (this.empId == "" || this.empId == null)
        this.$router.push('/login');
    },

    geType(type) {
      const TypeMap = {
        0: "购买订单",
        1: "供货订单",
      };
      return TypeMap[type];
    },

    getCategoryIdText(categoryId) {
      const categoryIdMap = {
        1: "服装",
        2: "食物",
        3: "生活用品",
        4: "娱乐用品",
        5: "学习用品",
      };
      return categoryIdMap[categoryId];
    },
    getnumberlimit() {
        this.selform.numberlimit = localStorage.getItem('numberlimit') || 0;
      },
    setnumberlimit(){
      localStorage.removeItem('numberlimit');
      localStorage.setItem('numberlimit',this.selform.newnumberlimit);
      this.selform.newnumberlimit="";
      this.getnumberlimit();
    },
  },
  mounted() {
    this.init();
    this.checkid();
    this.getTitledata();
    this.getMaindata();
    this.getnumberlimit();
  },
};
</script>
  
<style>
.router-link-active {
  text-decoration: none;
}

.table-container {
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
}

.custom-divider {
  margin: 4px 0;
  /* 调整 el-divider 的间距 */
}

.custom-divider-select {
  margin: 80% 0;
  /* 调整 el-divider 的间距 */
  background-color: RGB(128, 128, 128);
  color: RGB(128, 128, 128);
  width: 5%;
  height: 10%;

}

.custom-descriptions {
  padding-left: 10px;
  margin-bottom: 0;
}

.all {
  line-height: 30px;
}

.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
</style>